<template>
    <div class="music">
        <div class="top" @click="$router.back(-1)">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-arrowleftl"></use>
            </svg>
            返回主页
        </div>
        <div class="content">
            <div class="list" v-for="item in musicList" :key="item">
                <img :src='item.picUrl' alt="" @click="routerGo(item.id)">
                <div class="hint">{{item.name}}</div>
                <div class="playCount">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-play"></use>
                    </svg>
                    {{changeValue(item.playCount)}}
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .music{
        padding: .2rem .3rem;
    }
    .top{
        padding: .2rem 0;
        .icon{
            width: .6rem;
            transform: translateY(.05rem);
        }
    }
    .content{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .list{
            position: relative;
            margin-top: .2rem;
            width: 30%;
            img{
                border-radius: .2rem;
            }
            .hint{
                color: rgb(75, 75, 75);
                font-size: .2rem;
                overflow: hidden; 
                text-overflow: ellipsis;
                display: -webkit-box; 
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .playCount{
                position: absolute;
                top: 0;
                right: 0;
                border-radius: 1rem;
                background-color: rgba(94, 94, 94, 0.3);
                padding: .02rem .14rem;
                color: white;
                font-size: .16rem;
            }
        }
    }
</style>

<script>
import {getMusicList} from '@/api/api'
export default {
    data () {
        return {
            musicList:[]
        }
    },
    async mounted() {
        let res = await getMusicList(30);
        this.musicList = res.data.result;
    },
    methods: {
        routerGo(musicId){
            this.$router.push({name: 'listView', params: {id:musicId}});
        },
        changeValue(num){
            if (num>=100000000) {
                return (num/100000000).toPrecision(4)+"亿"
            }else if (num>10000){
                return (num/10000).toPrecision(4)+"万"
            }
        }
    },
}
</script>